<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box {
				margin: 50px auto;
				width: 50px;
				height: 50px;
				background: deepskyblue;
			}
		</style>
	</head>

	<body>
		<div class="box"></div>
		<script src="../ jquery-1.12.4.min.js"></script>
		<script>
			var ele = $('.box');
			$(document).keydown(
				function() {
					var opt = event.which;
					var left = ele.offset().left;
					var top = ele.offset().top;
					switch(opt) {
						case 37:
							ele.offset({
								top: top,
								left: left - 1
							});
							break;
						case 39:
							ele.offset({
								top: top,
								left: left + 1
							});
							break;
						case 40:
							ele.offset({
								top: top + 1,
								left: left
							});
							break;
						case 38:
							ele.offset({
								top: top - 1,
								left: left
							});
							break;
						default:
							break;
					}
				}
			);
		</script>
	</body>

</html>